<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title>角色管理</title>
<jsp:include page="../../views/layout/inc.jsp"></jsp:include>
<%-- <c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/editPage')}"> --%>
	<script type="text/javascript">
		$.canAdd = true;
	</script>
<%-- </c:if> --%>
<%-- <c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/editPage')}"> --%>
	<script type="text/javascript">
		$.canEdit = true;
	</script>
<%-- </c:if> --%>
<%-- <c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/delete')}"> --%>
	<script type="text/javascript">
		$.canDelete = true;
	</script>
<%-- </c:if> --%>
<%-- <c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/grantPage')}"> --%>
	<script type="text/javascript">
		$.canGrant = true;
	</script>
<%-- </c:if> --%>
<script type="text/javascript">
	var treeGrid;
	$(function() {
		var residenceId = '${residence.id}';

		var url =  '/roleController/treeGrid';
		if(residenceId && residenceId != null){
			url += '?residenceId=' + residenceId;
		}
		treeGrid = $('#treeGrid').treegrid({
			url : url,
			idField : 'id',
			treeField : 'name',
			parentField : 'parentId',
			fit : true,
			fitColumns : true,
			nowrap : true,
			border : false,
			nowrap : true,
			frozenColumns : [ [ {
				title : '编号',
				field : 'id',
				width : 150,
				hidden : true
			}, {
				field : 'name',
				title : '角色名称',
				width : 150
			} ] ],
			columns : [ [ {
				field : 'sortWeight',
				title : '排序',
				width : 40
			}, {
				field : 'parentId',
				title : '上级角色ID',
				width : 150,
				hidden : true
			},  {
				field : 'resourceIds',
				title : '拥有资源',
				width : 250,
				formatter : function(value, row) {
					if (value) {
						return row.resourceNames;
					}
					return '';
				}
			}, {
				field : 'resourceNames',
				title : '拥有资源名称',
				width : 80,
				hidden : true
			}, {
				field : 'remark',
				title : '备注',
				width : 150
			}, {
				field : 'action',
				title : '操作',
				width : 70,
				formatter : function(value, row, index) {
					var str = '';
					if ($.canAdd) {
						//str += $.formatString('<img onclick="addFun(\'{0}\',\'{1}\');" src="{2}" title="新增"/>', row.id,row.residenceId, '/images/extjs_icons/arrow/add.png');
					}
					if(row.parentId != 0 || '${isAdmin }' == 'true') {
						str += '&nbsp;';
						if ($.canEdit) {
							str += $.formatString('<img onclick="editFun(\'{0}\');" src="{1}" title="修改"/>', row.id, '/images/extjs_icons/pencil.png');
						}
						str += '&nbsp;';
						if ($.canGrant) {
							str += $.formatString('<img onclick="grantFun(\'{0}\');" src="{1}" title="授权"/>', row.id, '/images/extjs_icons/key.png');
						}
						str += '&nbsp;';
						if ($.canDelete) {
							str += $.formatString('<img onclick="deleteFun(\'{0}\');" src="{1}" title="删除"/>', row.id, '/images/extjs_icons/cancel.png');
						}
					}
					return str;
				}
			} ] ],
			toolbar : '#toolbar',
			onContextMenu : function(e, row) {
				e.preventDefault();
				$(this).treegrid('unselectAll');
				$(this).treegrid('select', row.id);
				$('#menu').menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			},
			onLoadSuccess : function() {
				parent.$.messager.progress('close');

				$(this).treegrid('tooltip');
			}
		});
		
		$('#searchForm').form('clear');
	});

	function deleteFun(id) {
		if (id != undefined) {
			treeGrid.treegrid('select', id);
		}
		var node = treeGrid.treegrid('getSelected');
		if (node) {
			parent.$.messager.confirm('询问', '您是否要删除当前角色？', function(b) {
				if (b) {
					parent.$.messager.progress({
						title : '提示',
						text : '数据处理中，请稍后....'
					});
					$.post('/roleController/delete', {
						id : node.id
					}, function(result) {
						if (result.success) {
							parent.$.messager.alert('提示', result.msg, 'info');
							treeGrid.treegrid('reload');
						}
						parent.$.messager.progress('close');
					}, 'JSON');
				}
			});
		}
	}

	function editFun(id) {
		if (id != undefined) {
			treeGrid.treegrid('select', id);
		}
		var node = treeGrid.treegrid('getSelected');
		if (node) {
			parent.$.modalDialog({
				title : '修改角色',
				width : 500,
				height : 500,
				href : '/roleController/editPage?id=' + node.id,
				buttons : [ {
					text : '确认修改',
					handler : function() {
						parent.$.modalDialog.openner_treeGrid = treeGrid;//因为新增成功之后，需要刷新这个treeGrid，所以先预定义好
						var f = parent.$.modalDialog.handler.find('#form');
						f.submit();
					}
				} ]
			});
		}
	}

	function addFun(id,residenceId) {
		if(!id) id = '';
		if(!residenceId) residenceId = '';
		parent.$.modalDialog({
			title : '新增角色',
			width : 500,
			height : 500,
			href : '/roleController/addPage?id=' + id +'&residenceId=' + residenceId,
			buttons : [ {
				text : '确认新增',
				handler : function() {
					parent.$.modalDialog.openner_treeGrid = treeGrid;//因为新增成功之后，需要刷新这个treeGrid，所以先预定义好
					var f = parent.$.modalDialog.handler.find('#form');
					f.submit();
				}
			} ]
		});
	}

	function redo() {
		var node = treeGrid.treegrid('getSelected');
		if (node) {
			treeGrid.treegrid('expandAll', node.id);
		} else {
			treeGrid.treegrid('expandAll');
		}
	}

	function undo() {
		var node = treeGrid.treegrid('getSelected');
		if (node) {
			treeGrid.treegrid('collapseAll', node.id);
		} else {
			treeGrid.treegrid('collapseAll');
		}
	}

	function grantFun(id) {
		if (id != undefined) {
			treeGrid.treegrid('select', id);
		}
		var node = treeGrid.treegrid('getSelected');
		if (node) {
			parent.$.modalDialog({
				title : '角色授权',
				width : 500,
				height : 500,
				href : '/roleController/grantPage?id=' + node.id,
				buttons : [ {
					text : '授权',
					handler : function() {
						parent.$.modalDialog.openner_treeGrid = treeGrid;//因为新增成功之后，需要刷新这个treeGrid，所以先预定义好
						var f = parent.$.modalDialog.handler.find('#form');
						f.submit();
					}
				} ]
			});
		}
		
		
	}
	function searchFun() {
		treeGrid.treegrid('load', $.serializeObject($('#searchForm')));
	}
	function cleanFun() {
		$('#searchForm').form('clear');
		treeGrid.treegrid('load', {});
	}
</script>
</head>
<body>
	<div class="easyui-layout" data-options="fit:true,border:false">
	  <div data-options="region:'north',title:'查询条件',border:false" style="height: 80px; overflow: hidden;">
			<form id="searchForm">
				<table class="table table-hover table-condensed" style="">
					<c:if test="${isAdmin }">
							<tr>
								<td>小区名字</td>
								<td>
									<select  id="residenceId" name="residenceId" class="easyui-combobox"  type="text" placeholder="小区名字"   data-options="width:160,valueField:'id',textField:'text',icons:[{
													iconCls:'icon-clear',
													handler: function(e){
														$(e.data.target).combobox('setValue','');
													}
												}]" >
											<c:forEach items="${residentces }" var="r">
													<option value="${r.id }">${r.name}</option>
											</c:forEach>
									</select>
								</td>
							</tr>
					</c:if>
					<tr>
						<td>角色名称</td>
						<td><input name="name" placeholder="角色名称" style="width:160px;" class="span2" /></td>
					</tr>
					<!-- 
					<tr>
						<th>创建时间</th>
						<td><input class="span2" name="startGmtCreate" placeholder="点击选择时间" onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly="readonly" />至<input class="span2" name="endGmtCreate" placeholder="点击选择时间" onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly="readonly" /></td>
					</tr>
					<tr>
						<th>最后修改时间</th>
						<td><input class="span2" name="startGmtModify" placeholder="点击选择时间" onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly="readonly" />至<input class="span2" name="endGmtModify" placeholder="点击选择时间" onclick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly="readonly" /></td>
					</tr>
					 -->
				</table>
			</form>
		</div>
		<div data-options="region:'center',border:false" title="" style="overflow: hidden;">
			<table id="treeGrid"></table>
		</div>
	</div>
	<div id="toolbar" style="display: none;">
<%-- 		<c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/addPage')}"> --%>
			<a onclick="addFun();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">新增</a>
<%-- 		</c:if> --%>
		<a onclick="redo();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-undo'">展开</a> 
		<a onclick="undo();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-redo'">折叠</a>
		<!-- 
		 <a onclick="treeGrid.treegrid('reload');" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'">刷新</a>
		 -->
		<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="searchFun();">提交查询</a>
		<a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="cleanFun();">重置查询</a>
	</div>

	<div id="menu" class="easyui-menu" style="width: 120px; display: none;">
<%-- 		<c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/addPage')}"> --%>
			<div onclick="addFun();" data-options="iconCls:'icon-add'">增加</div>
<%-- 		</c:if> --%>
<%-- 		<c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/delete')}"> --%>
			<div onclick="deleteFun();" data-options="iconCls:'icon-remove'">删除</div>
<%-- 		</c:if> --%>
<%-- 		<c:if test="${fn:contains(sessionInfo.resourceList, '/roleController/editPage')}"> --%>
			<div onclick="editFun();" data-options="iconCls:'icon-edit'">编辑</div>
<%-- 		</c:if> --%>
	</div>
</body>
</html>